<template>
    <div>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
            <Form-item label="姓名" prop="name">
                <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
            </Form-item>
            <Form-item label="手机号" prop="mobile">
                <Input v-model="formValidate.mobile" placeholder="请输入手机号" number></Input>
            </Form-item>
            </Form-item>
            <Form-item label="短信验证码：" prop="code">
                <Row>
                    <Col span="15">
                    <Input v-model="formValidate.code" placeholder="请输入验证码">
                    </Input>
                    </Col>
                    <Col span="8">
                    <button type="button" class="btn btn-primary" @click="getYZM()" style="margin-left: 25px">获取验证码</button>
                    </Col>
                </Row>
            </Form-item>
            <Form-item label="运营经验" prop="experience">
                <Input v-model="formValidate.experience" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
            </Form-item>
            <Form-item label="易撰问答简介" prop="introduction">
                <Input v-model="formValidate.introduction" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
            </Form-item>
            <Form-item label="擅长领域" prop="field">
                <Select v-model="formValidate.field" placeholder="请选择擅长领域">
                    <Option v-for="field in fieldList" :value="field.QaClassificationID">{{field.QaCTitle}}</Option>
                </Select>
            </Form-item>
            <Form-item>
                <Button type="primary" @click="handleSubmit('formValidate')">提交审核</Button>
            </Form-item>
        </Form>
    </div>
</template>
<script type="text/ecmascript-6">

    import $ from 'jquery'
    import getData from '../../../api/getData'

    export default {
        data: function () {

            const validateMobile = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                }else if (!Number.isInteger(value) || (value+'').length !== 11) {
                    callback(new Error('请输入正确的手机号码'));
                }else {
                    getData.post("verifyQaqPhone", {
                        Cellphone : value+''
                    }).then(function (response) {
                        if(response.data.code == 0){
                            callback();
                        }else{
                            callback(new Error('该手机号已被注册，请重新输入手机号'));
                        }
                    }).catch(function (response) {
                        callback(new Error('网络错误，手机验证失败，请稍候重试'));
                    });
                }
            };

            const validateAgreement = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请确认勾选用户协议'));
                } else {
                    callback();
                }
            };

            return {
                fieldList: [],
                formValidate: {
                    name: '',
                    mobile: '',
                    code: '',
                    experience: '',
                    introduction: '',
                    field: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    mobile: [
                        { validator: validateMobile, trigger: 'blur' }
                    ],
                    code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]
                }
            }
        },

        created(){
            this.queryQAClassification();
        },

        methods: {

            //发送一个请求，获取验证码
            getYZM:function(){
                var self = this;
                getData.post("GetYZM", {phone : self.formValidate.mobile} ).then(function (response) {
                    if(response.data.code != 0){
                        self.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                    }
                }).catch(function (response) {
                    self.$Message.info('网络错误，请联系客服');
                });
            },

            //加载易撰擅长领域下拉数据集
            queryQAClassification (name) {
                var self = this;
                getData.post("queryQAClassification", {
                    QueryQAClassification: ''
                }).then(function (response) {
                    if(response.data.code == 0){
                        self.fieldList = response.data.data ? response.data.data : [];
                    }else{
                        self.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                    }
                }).catch(function (response) {
                    self.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                });
            },

            //验证后再提交注册答主
            handleSubmit (name) {
                var self = this;
                var param = {
                    Name: self.formValidate.name,
                    Cellphone: self.formValidate.mobile,
                    MediaAccount: self.formValidate.experience,
                    Summary: self.formValidate.introduction,
                    QaClassificationID:  self.formValidate.field
                }
                self.$refs[name].validate((valid) => {
                    if (valid) {
                        getData.post("applyQaqUser", {
                            QAMaster : JSON.stringify(param)
                        }).then(function (response) {
                            if(response.data.code == 0){
                                self.$router.push({path: '/questionResponse/home'})

                            }else{
                                self.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                            }
                        }).catch(function (response) {
                            self.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                        });

                    } else {
                        self.$Message.error('表单验证失败!');
                    }
                })
            }


        }
    }
</script>
<style lang="scss">
</style>
